<template>
    <div class="orderDetail">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    :title="orderStatusFmt(groupStatus)"
                    left-arrow
                    @click-left="$navBack('prePath')">
            </van-nav-bar>
        </div>
        <order-detail-status
                :status="status"
                :orderId="orderId">
        </order-detail-status>
        <div class="userInfo page-pad-pk bg-white-pk">
            <div class="d-flex-pk receiveInfo">
                <div class="pad-right-item">
                    <img src="../../assets/images/addressIcon.png" alt="" class="addreseImg">
                </div>
                <div>
                    <div class="d-flex-pk align-center">
                        <div class="font-size-15-pk pad-right-item">{{orderInfo.receiverName}}</div>
                        <div class="font-size-13-pk">{{orderInfo.receiverPhone}}</div>
                    </div>
                    <div class="font-size-14-pk">{{orderInfo.receiverAddress}}</div>
                </div>
            </div>
        </div>
        <div class="goodsInfo">
            <div class="goodsWrap page-pad-pk list-item-pad-pk ">
                <div class="pad-top-item border-bottom">
                    <div class="d-flex-pk header">
                        <div class="d-flex-pk shopInfo">
                            <img src="../../assets/images/shopHome.png" class="shopHome" />
                            <div class="shopName">{{orderInfo.shopName}}</div>
                        </div>
                    </div>
                </div>
                <div class="pad-top-item">
                    <div class="goodsList" v-for="(g,kg) in orderInfo.orderGoodsVoList"
                         :key="kg"
                         @click="handleGoodsDetail(g)">
                        <div class="d-flex-pk goodsItem ">
                            <div>
                                <pk-img
                                :src="g.picture"
                                width="88px"
                                height="88px">
                                </pk-img>
                            </div>
                            <div class="d-flex-pk flex-fill">
                                <div class="goodsName flex-fill text-black-pk">
                                    <div class="text-black-pk">{{g.goodsName}}</div>
                                    <div class="flex-fill text-light-pk font-size-13-pk pad-top-item">{{g.attrInputName}}</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-black-pk">{{g.price}}</div>
                                    <div class="text-light-pk">x{{g.attrNum}}</div>
                                </div>
                            </div>
                        </div>
                        <!--状态:0未付款 1已付款未发货 2取消订单,3，已发货，4，确认收货，5，待退款，
                        6已退款，7已申请退货，8已退货，9待卖家同意退货，10交易完成，11待买家填写物流信息-->
                        <div class="text-right" v-if="orderInfo.status==='6'">
                            <div class="operateBtn btn-border-gray" >退款成功</div>
                        </div>
                        <div class="text-right" v-if="orderInfo.status==='3'">
                            <div class="operateBtn btn-border-gray" >分享给好友</div>
                            <div class="operateBtn btn-border-red" >申请退款</div>
                        </div>
                        <div class="text-right" v-if="orderInfo.status==='4' || orderInfo.status==='10'">
                            <div class="operateBtn btn-border-gray" >分享给好友</div>
                            <div class="operateBtn btn-border-red" >申请售后</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="itemLeft">商品总价</div>
                    <div class="font-size-12-pk">￥{{orderInfo.totalPrice}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="itemLeft">运费</div>
                    <div class="font-size-12-pk">￥{{orderInfo.shippingCost}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="itemLeft">店铺优惠</div>
                    <div class="font-size-12-pk">￥{{orderInfo.shopDiscount}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="itemLeft">银两抵扣</div>
                    <div class="font-size-12-pk text-red-pk">-￥{{orderInfo.silverDiscount}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="itemLeft">红包</div>
                    <div class="font-size-12-pk text-red-pk">-￥{{orderInfo.redPacketDiscount}}</div>
                </div>
                <div class="d-flex-pk pad-top-item ">
                    <div class="itemLeft text-red-pk">需付款</div>
                    <div class="font-size-12-pk text-red-pk">￥{{orderInfo.needPayment}}</div>
                </div>
            </div>
        </div>
        <div class="orderInfo page-pad-pk list-item-pad-pk bg-white-pk">
            <div class="d-flex-pk">
                <div class="line"></div>
                <div class="orderTitle font-size-15-pk">订单信息</div>
            </div>

            <div class="font-size-13-pk text-gray-deep-pk">
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class=" pad-right-item">订单编号:</div>
                    <div class="">{{orderInfo.orderSn}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray">
                    <div class="pad-right-item">创建日期:</div>
                    <div class="">{{orderInfo.createTime}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray" v-show="payTime">
                    <div class="pad-right-item">付款时间:</div>
                    <div class="">{{orderInfo.paymentTime}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray" v-show="deliverTime">
                    <div class="pad-right-item">发货时间:</div>
                    <div class="">{{orderInfo.sendTime}}</div>
                </div>
                <div class="d-flex-pk pad-top-item light-border-bottom-gray" v-show="successTime">
                    <div class="pad-right-item">成交时间:</div>
                    <div class="">{{orderInfo.expireTime}}</div>
                </div>
                <div v-show="deliverWay">
                    <div v-for="(i,k) in orderInfo.orderShippingVoList" :key="k">
                        <div class="d-flex-pk pad-top-item light-border-bottom-gray" >
                            <div class="pad-right-item">快递方式:</div>
                            <div class="">{{i.shippingName}}</div>
                        </div>
                        <div class="d-flex-pk pad-top-item">
                            <div class="pad-right-item">快递编号:</div>
                            <div class="">{{i.shippingSn}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pad-top-item">
                <div class="shopService d-flex-pk">
                     <div>
                         <img src="../../assets/images/myCustomerService.png" alt="serviceIcon" class="serviceIcon">
                     </div>
                    <div class="font-size-14-pk connectShop">联系卖家</div>
                </div>
            </div>
        </div>
        <div class="recommend page-pad-pk bg-white-pk list-item-pad-pk">
            <div class="like text-center-pk font-size-15-pk text-red-pk">你可能还喜欢</div>
            <div class="goodsList d-flex-pk pad-top-item d-flex-pk">
                <div v-for="(item,k) in goodsInfoList" :key="k"
                     @click="handleGoodsDetail(item)"
                     class="width-45">
                    <div>
                        <pk-img
                                :src="item.goodsThumb"
                                width="170px"
                                height="170px">
                        </pk-img>
                        <!-- <img :src="item.goodsThumb" alt="" class="goodsImg">-->
                    </div>
                    <div class="goodsInfo">
                        <div class="pad-top-item font-size-14-pk goodsName">{{item.goodsName}}</div>
                        <div class="d-flex-pk font-size-11-pk pad-top-item ">
                            <div class="price text-red-pk">￥{{item.originalPrice}}</div>
                            <div class="buyNum text-over">{{item.salesNum}}已购</div>
                            <div>
                                <img src="../../assets/images/car.png" class="carImg">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex-pk shareItem font-size-11-pk text-red-pk">
                        <div class="share">分享赚</div>
                        <div>{{item.saleReward}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import OrderDetailStatus from "../order/OrderDetailStatus"
    import PkImg from "../../components/PkImg";
    export default {
        components: {
            PkImg,
            OrderDetailStatus},
        data(){
            return{
                groupStatus:"",
                orderId:this.$route.query.orderId,
                status:"",
                orderInfo:{},
                payTime:false,
                deliverTime:false,
                successTime:false,
                deliverWay:false,
                normalPage : 1,
                goodsInfoList:[],
            }
        },
        beforeRouteEnter(to, from, next) {
            let prePath = "";
            //待优化，将参数带上
            if(from.path === "/login" || from.path === "/register" || from.path === "/" || from.path === "/wxLogin" ) {
                prePath = "/index"
            }else {
                //涉及到需要保存上一页数据的，可以拼接到地址
                prePath = from.fullPath
            }
            next( vm => {
                vm.$store.commit("setPrePath", prePath)
            })
        },
        created(){
          this.getOrderDetail();
          this.getGoodsInfoList(this.normalPage)
        },
        methods:{
            toBack(){
                this.$router.push({path: this.$store.state.prePath})
            },
            getOrderDetail(){
                this.$api.getOrderDetail(this.orderId).then(res=>{
                    let result=this.$resData(res);
                    this.status=result.status;
                    this.groupStatus=result.groupStatus;

                    if(result){
                        this.orderInfo=result;
                        //状态:0未付款 1已付款未发货 2取消订单,3，已发货
                        // 4，确认收货，6已退款，8已退货，10交易成功
                        let orderStatus=result.status;
                        if(orderStatus=='1'){
                            this.payTime=true;
                        }
                        if(orderStatus=='2'){
                            this.payTime=true;
                            this.deliverTime=true;
                            this.successTime=true;
                        }
                        if(orderStatus=='3'){
                            this.payTime=true;
                            this.deliverTime=true;
                            this.deliverWay=true;
                        }
                        if (orderStatus=='4' || orderStatus=='10'){
                            this.payTime=true;
                            this.deliverTime=true;
                            this.successTime=true;
                            this.deliverWay=true;
                        }
                    }
                })
            },
            orderStatusFmt(groupStatus){
               let arr=[
                    {value:"0",name:"拼团中"},
                    {value:"1",name:"拼团成功"},
                    {value:"2",name:"拼团失败"},
                    {value:"3",name:"未成团"},
                ];
                return this.$util.dictTranslate(arr,groupStatus)

            },
            getGoodsInfoList(normalPage){
                this.$api.getGoodsInfoList({
                    beGroup: 0,
                    page: normalPage,
                    size: 10
                }).then(res => {
                    let result=this.$resArr(res);
                    if (result) {
                        this.goodsInfoList = this.goodsInfoList.concat(result.list);
                    }
                });
            },
            //商品详情
            handleGoodsDetail(item){
                this.$router.push({
                    name:"goodsDetail",
                    params:item.goodsId,
                })
            },
        }

    }
</script>
<style lang="scss" scoped>
    .orderDetail{
        line-height: 1.8;

        .pad-top-item{
            padding-top: 10px;
        }
        .pad-right-item{
            padding-right: 15px;
        }
        .flex-fill{
            flex: 1 1 auto ;
        }
        .text-right{
            text-align: right;
        }
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .deliverWrap{
            align-items: center;
            .shipName{
                padding-right: 10px;
            }
            .color-green{
                color:#139C0F
            }
            .color-gray{
                color: #999999FF;
            }
            .deliverImg{
                width: 22px;
                height: 22px;
                padding-right: 10px;
            }
        }
        .userInfo{
            padding-top: 10px;
            padding-bottom: 15px;
            .receiveInfo{
                align-items: center;
                .align-center{
                    align-items: center;
                }
            }
            .addreseImg{
                width: 16px;
                height: 21px;
            }
        }
        .goodsWrap{
            margin-top: 10px;
            padding-bottom: 10px;
            background: #fff;
            .header{
                align-items: center;
                justify-content: space-between;
                .shopInfo{
                    align-items: center;
                    .shopName{
                        padding-left: 5px;
                        font-weight: 600;
                    }
                }
                .orderStatus{
                    align-items: center;
                    justify-content: space-between;
                    flex-direction: row;
                    text-align: right;
                }
                .shopHome{
                    width: 21px;
                    height: 20px;
                }
            }
            .goodsList{
                .goodsItem{
                    justify-content: space-between;
                    .goodsImg{
                        width: 88px;
                        height: 88px;
                    }
                }
                .goodsName{
                    margin-right:5px;
                    margin-left: 5px;
                }

            }
            .operateBtn{
                border-radius: 5px;
                padding: 5px;
                display: inline-block;
                box-sizing: border-box;
                /*width: 70px;
                height: 22px;*/
                line-height: 14px;
                text-align: center;
                margin-left: 5px;
                margin-top: 5px; ;
            }
            .btn-border-gray{
                border:1px solid #4D4D4D;
                color: #4D4D4D;
            }
            .btn-border-red{
                border:1px solid #D82D11;
                color: #D82D11;
            }
            .itemLeft{
                flex-grow: 1;
                font-size: 13px;
                color: #4D4D4D;
            }
        }
        .orderInfo{
            margin-top: 10px;
            .line{
                border-left: 2px solid #D82D11;
                padding:5px;
            }
            .orderTitle{
                font-weight: 600;
            }
            .serviceIcon{
                width: 21px;
                height: 19px;
                padding-right: 5px;
            }
            .shopService{
                justify-content: center;

            }
        }
        .recommend{
            margin-top: 10px;
            .goodsList{
                .width-45{
                    width: 45vw;;
                }
                flex-wrap: wrap;
                justify-content: space-between;
                flex-direction: row;
                .goodsImg{
                    width: 170px;
                    height: 170px;
                    border-radius:4px 4px 0px 0px;
                }
                .goodsInfo{
                    padding: 5px;
                    align-items: center;
                    .price{
                        padding-right: 5px;
                    }
                    .buyNum{
                        flex-grow: 1;
                        color: #B3B3B3;
                    }
                    .carImg{
                        width: 18px;
                        height: 16px;
                    }
                    .goodsName{
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .text-over{
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                .shareItem{
                    justify-content: space-between;
                    background:rgba(253,206,198,1);
                    border-radius:0px 0px 4px 4px;
                    padding: 5px;
                    margin: 10px 0;
                    .share{
                        flex-grow: 1;
                    }
                }


            }
        }
    }
</style>
